//1. 对象方式
function Son() {
  return <div>我是子组件</div>;
}
// const zksComponents = {
//   Father() {
//     return (
//       <div>
//         我是父组件
//         <Son></Son>
//       </div>
//     );
//   },
// };

// // 还可使用对象的解构方式
// const { Father } = zksComponents;
//2. 函数方式 因为函数本质也是对象
const ZksComponents = () => {
  return <div>我是父组件</div>;
};
ZksComponents.Father = function () {
  return (
    <div>
      <Son></Son>
    </div>
  );
};
function Grand() {
  return (
    <div className="list">
      <h1>组件的点标记法</h1>
      <ZksComponents />
      <ZksComponents.Father></ZksComponents.Father>
    </div>
  );
}

export default Grand;
